﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仅仅只是扫雷</title>
<style>
.ds{
	margin-left:40px;
}
.chuda{
	font-size:16px;
	font-weight:bold;
}
.di button,.di div{
	margin:0;
	padding:0;
	width:25px;
	height:25px;
	float:left;
}
.kk input{
	width:40px;
	height:20px;
	background:#6FF;
	font-size:16px;
}
.di button{
	background:#00F;
}
.kk{
	margin:20px 63px 20px 63px;
	width:245px;
	height:30px;
	border:0px;
}
.hong{
	background:red !important;
}
.huang{
	background:#ffed00 !important;
}
#A,#B,.di div{
	border:#000 solid 1px;
}
#A{
	margin: 0 50%;
	position: relative;
	transform: translateX(-50%);
	display: inline-block;

}
.di{
	position: relative;
	margin: 0 63px 30px 63px;
	display: inline-block;
}
#come_back{
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 15px 0 0 5px;
	color: #fff;
	border: none;
	background: #3cbd83;
	box-shadow: 0 0 7px 1px #3cbd83;
	cursor: pointer;
    outline: none;
}
#A>button:hover{
	font-size:16px;
	color:#660;
}
.ld_box{
	height:25px;
	position:relative;
}
.ld{
	width:40px;
	height:100%;
	position:absolute;
	background:#CCC;
	padding-left:10px;
    cursor: grab;
}
#B{
	width:200px;
	height:350px;
	border:#000 solid 1px;
	position:absolute;
	right:0;
	top:0;
}
#B >div{
	width:110px;
	height:40px;
	left:25px;
	position:relative;
	padding:15px 0 0 30px;
}
.B1{
	border:#FF0 solid 1px;
	top:30px;
}
.B2{
	border:#999 solid 1px;
	top:60px;
}
.B3{
	border:#F90 solid 1px;
	top:90px;
}
#dian{
	position:absolute;
	top:350px;
	right:0;
}
.num_box{
	margin-bottom: 20px;
    text-align: center;
}
.num_box input{
	width: 75px;
	padding: 2px 5px;
	border: thin solid #ded6d6;
	height: 17px;
}
.num_box button{
	width: 75px;
	border-radius: 6px;
	border: none;
	color: #fff;
	background: #64c2d2;
	height: 25px;
	cursor: pointer;
}
</style>
<!-- <script src="../DWTYDKJ3.0.js"></script>
<script src="../cookie基本操作.js"></script> -->
<script>
function setStyle(oA,mX,json,fnH){//节点，速率，样式，后续方法
	clearInterval(oA.oD);
	oA.oD=setInterval(function(){
		var bT=true;//循环json的没个要调的值，然后结束定时器
		for(var sS in json){
		    if(sS!='opacity'){
		         m=parseInt(getStyle(oA,sS));//获得该属性的值
		    }else{
		         m=Math.round(parseFloat(getStyle(oA,sS))*100);//小数点失去精，要四舍五入,透明度*100方便计算
		    }
		    var mS=(json[sS]-m)/mX;
		    mS=mS>0?Math.ceil(mS):Math.floor(mS);
			
			if(sS=='opacity'){
				oA.style.filter='alpha(opacity:'+(m+mS)+')';
				oA.style.opacity=(m+mS)/100;
			}else{
			    oA.style[sS]=m+mS+'px';
		    }
			if(m!=json[sS]){
			    bT=false;
		    }
		}
		if(bT){
			clearInterval(oA.oD);
		    if(fnH){
			   fnH();
	        }
		}
	},30);
}

function setY(oA,mZ,mJ,mS){//节点，目标值，增值，时间
		clearInterval(oA.oD);
		if(!oA.style.borderRadius){
			oA.style.borderRadius='1px';
		}
		var mM=parseInt(oA.style.borderRadius);
		oA.oD=setInterval(function(){
			if(mM!=mZ){
				mM=parseInt(oA.style.borderRadius)+mJ;
			    oA.style.borderRadius=mM+'px';
			}else{
				clearInterval(oA.oD);
			}
		},mS);

}
function getStyle(oA,sS){//为什么了兼容
	if(oA.currentStyle){
		return oA.currentStyle[sS];
	}else{
		return getComputedStyle(oA)[sS];
	}
}
function getClass(obj,sClass){
	var aA=obj.getElementsByTagName('*');
	var aB=[];
	for(var i=0;i<aA.length;i++){
		if(aA[i].className==sClass){
			aB.push(aA[i]);
		}
	}
	return aB;
}
</script>
<script>
	function IsPC() {
	   var userAgentInfo = navigator.userAgent;
	   var Agents = ["Android", "iPhone",
	      "SymbianOS", "Windows Phone",
	      "iPad", "iPod"];
	   var flag = true;
	   for (var v = 0; v < Agents.length; v++) {
	      if (userAgentInfo.indexOf(Agents[v]) > 0) {
	         flag = false;
	         break;
	      }
	   }
	   return flag;
	}
</script>
<script>
	// JavaScript Document
function setCookie(key,value,m){//创建
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+m);
	document.cookie = key + '=' + value + ";expires=" + oDate;
}
function getCookieK(key){//用key来查找，返回一个value
	var aCookie=document.cookie.split('; ');
	for(var i=0;i<aCookie.length;i++){
		var aA=aCookie[i].split('=');
		if(aA[0]==key){
			return aA[1];
		}
	}
	return '';
}
function getCookieV(value){//用value来查找，返回key数组
	var aV=[];
	var aCookie=document.cookie.split('; ');
	for(var i=0;i<aCookie.length;i++){
		var aA=aCookie[i].split('=');
		if(aA[1]==value){
			aV.push(aA[0]);
		}
	}
	return aV;
}
function removeCookieK(key){//删掉key相同的cookie
	setCookie(key,1,-1);
}
function removeCookieV(value){//删掉value相同的cookie
	var aV=getCookieV(value);
	for(var i=0;i<aV.length;i++){
		removeCookieK(aV[i]);
	}
}
</script>
<script>
window.onload=function(){
	//连续点击定时器会停
	var oDiv = document.getElementById('A');
	var oDivB = document.getElementById('B');
	var oInput = document.getElementById('dian');

	var oDivld = getClass(oDiv,'ld')[0];
	var oDivkk = getClass(oDiv,'kk')[0];
	var oDivdi  =  getClass(oDiv,'di')[0];//备雷地
	var oDiv1 = getClass(oDivB,'B1')[0];
	var oDiv2 = getClass(oDivB,'B2')[0];
	var oDiv3 = getClass(oDivB,'B3')[0];

	var OCr_di = getClass(oDivdi,'cr_di')[0];//布雷地
	var aInput = oDivkk.getElementsByTagName('input');
	oInput.dian = true;//让榜单有2重点击效果
	fnRankingList();
	var	come_back = {};//储存本局.用于重开本局
	var b_back = false;//判断是否需要重开
	var oD = null;//定时器
	var difficulty = {//雷局
		num:0,
		numX:0,
		numY:0,
		lei:0,
	}
	oDivdi.red = 0;
	if(IsPC()){
		oDivld.onmousedown = function(e){//用运动的鼠标位置减去按下的鼠标位置
			var v = e || event;
			var mL = e.clientX - oDivld.offsetLeft;
			document.onmousemove = function(e){
				var v=e || event;
				var mML = v.clientX - mL;
				if(mML>oDiv.offsetWidth-oDivld.offsetWidth){
					mML=oDiv.offsetWidth-mML.offsetWidth;
					oDivdi.state = true;
					fnJC(fnP);
				}
				if(mML<0){
				   mML=0;
				}
				oDivld.style.left=mML+'px';
			}
			document.onmouseup = function(){
				if(oDivld.offsetLeft!=0){
					setStyle(oDivld,10,{left:0});
				}
				document.onmousemove=null;
				document.onmouseup=null;
			}
			return false;
		}
	}else{
		oDivld.innerHTML = '新局';
		oDivld.onclick = function(){
			oDivdi.state = true;
			fnJC(fnP);
		}
	}
	document.querySelector('.num_box>button').onclick = function(){
		var num = document.querySelector('.num_inp').value;
		var lei = document.querySelector('.lei_inp').value;
		if(!/^[1-9][0-9]*\*[1-9][0-9]*$/.test(num)){
			alert('我求求你，请设置成数字*数字，不然运行不下去');
			return;
		}
		if(!lei>0){
			alert('没雷扫你个屁啊！');
			return;
		}
		num = num.split('*');
		if(num[0] <=1 || num[1]<=1){
			alert('请设置大于1的正整数');
			return;
		}
		difficulty.num = num[0]*num[1];
		difficulty.numX = parseInt(num[0]);
		difficulty.numY = parseInt(num[1]);
		difficulty.lei = parseInt(lei);
	}
	document.querySelector('.num_box>button').click();
	fnJC(fnP);
	aInput[1].value = difficulty.lei - oDivdi.red;
	document.getElementById('come_back').onclick = function(){
		if(b_back){
			fnJC();
			oDivdi.replaceChild(come_back,OCr_di);
			OCr_di = come_back;
			fnM();
		}
	}
	//榜首
	oInput.onclick=function(){
		if(oInput.dian){
		    setStyle(oInput,10,{right:-oInput.offsetWidth},function(){
			    setStyle(oDivB,10,{right:-oDivB.offsetWidth},function(){
				    setStyle(oInput,10,{right:0});
					oInput.dian=false;
			    });
		    });
		}else{
			setStyle(oInput,10,{right:-oInput.offsetWidth},function(){
				setStyle(oDivB,10,{right:0},function(){
					setStyle(oInput,10,{right:0});
					oInput.dian=true;
				});
			})
		}
	}
	function fnRankingList(){
	 	var o1 = getCookieK('o1');
		var o2 = getCookieK('o2');
		var o3 = getCookieK('o3');
	 	var B1 = getCookieK('B1');
	 	var B2 = getCookieK('B2');
	 	var B3 = getCookieK('B3');
	 	B1 = isNaN(B1)?'':B1;
	 	B2 = isNaN(B2)?'':B2;
	 	B3 = isNaN(B3)?'':B3;
	 	oDiv1.innerHTML = o1+':'+B1+'秒';
	 	oDiv2.innerHTML = o2+':'+B2+'秒';
	 	oDiv3.innerHTML = o3+':'+B3+'秒';
	}
	fnRankingList();
	function fnJC(fn){//集成的
	    clearInterval(oD);
		while(OCr_di.children.length){
			OCr_di.removeChild(OCr_di.children[0]);
		}
		aInput[0].value=0;
		oDivdi.red=0;
		aInput[1].value= difficulty.lei - oDivdi.red;
		if(fn)fn();
		oDivdi.onclick = function(e){
			var oButton = e.target;
			if(oButton.nodeName == 'BUTTON'){
				if(fn){
					come_back = false;
					fnL(oButton);//设置雷数
				}
				fnRemove(oButton);//排雷
				fnKS();//计时
				fnEvent();//事件
			}
		}
		oDivdi.oncontextmenu = function(){
			return false;
		}
		
	}
	function fnKS(){//计时
	    clearInterval(oD);
	    if(aInput[0].value == 0)++aInput[0].value;
		oD = setInterval(function(){
			++aInput[0].value;
		},1000);
	}
	function fnEvent(){
		oDivdi.onclick = function(e){
			var oButton = e.target
			if(oButton.nodeName == 'BUTTON' && oButton.className.indexOf('hong') == -1){
				fnRemove(oButton);
			}
		}
		oDivdi.oncontextmenu = function(e){
			if(e.target.nodeName == 'BUTTON'){
				fnYJ.call(e.target);
			}
			return false;
		}
	}
	
	function fnYJ(){//右键操作
		var cN = this.className;
		switch(cN){
			case '':
			if(oDivdi.red < difficulty.lei){
				this.className = 'hong';
				oDivdi.red++;//设置上限++
			}else{
				this.className = 'huang';
			}
			break;
			case 'hong':
			this.className = 'huang';
			oDivdi.red--;//设置上限--;
			break;
			case 'huang':
			this.className = '';
		}
		aInput[1].value = difficulty.lei - oDivdi.red;
	}
	
	function fnP(){//局初始化
		b_back = false;
	    for(var i=0;i<difficulty.num;i++){
		    var oD=document.createElement('div');
		    OCr_di.appendChild(oD);
		    var oI=document.createElement('button');
		    oI.zi = 0;//清除后显示的
		    oI.z = i;//下标
		    // oI.innerText = i;
		    oD.appendChild(oI);
	    }
	    OCr_di.style.height = OCr_di.children[0].offsetHeight * difficulty.numY + 'px'
	    OCr_di.style.width = OCr_di.children[0].offsetWidth * difficulty.numX + 'px';
	}
	//设置雷数
	//oButton是当前第一次触发的按钮，所以不能为雷
	function fnL(oButton){
		b_back = true;
		var aL = [],
			mL,oB;
		while(aL.length < difficulty.lei){
			mL = parseInt(Math.random() * difficulty.num);//下标
			oB = OCr_di.children[mL].firstElementChild;//按钮
			if(aL.every(val=>val!=mL) && oB != oButton){
				oB.zi = '雷';
				aL.push(mL);
			}
		}
		fnM();
	}
	//初始化按钮块属性
	function fnM(){//
		fnc_M();
		var stateDom = OCr_di.children;//雷地
		for(var z = 0,len = stateDom.length;z<len;z++){
			var north = z - difficulty.numX;//北
			var south = z + difficulty.numX;//南
			var oButton = stateDom[z].firstElementChild;//清雷按钮
			if(oButton.zi != '雷'){
			    if(z % difficulty.numX == 0){//判断是否是每行的第一个//左边
				    if(z == 0){//上
						 oButton.aA = [
							 stateDom[south].firstElementChild,//南
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[south + 1].firstElementChild,//东南
						 ];
				    }else if(z == difficulty.num-difficulty.numX){//下
						oButton.aA=[
							 stateDom[north].firstElementChild,//北
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[north + 1].firstElementChild,//东北
						];
				    }else{
						oButton.aA = [
							 stateDom[north].firstElementChild,//北
							 stateDom[south].firstElementChild,//南
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[north + 1].firstElementChild,//东北
							 stateDom[south + 1].firstElementChild,//东南
						];
				    }
			    }else if((z + 1) % difficulty.numX == 0){//右边
					if((z+1)==difficulty.numX){//上
						oButton.aA = [
							 stateDom[south].firstElementChild,//南
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[south - 1].firstElementChild,//西南
						];
					}else if(z+1==difficulty.num){//下
						oButton.aA = [
							 stateDom[north].firstElementChild,//北
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[north - 1].firstElementChild,//西北
						];
					}else{
						oButton.aA = [
							 stateDom[north].firstElementChild,//北
							 stateDom[south].firstElementChild,//南
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[north - 1].firstElementChild,//西北
							 stateDom[south - 1].firstElementChild,//西南
						];
					}
				}else if(z < difficulty.numX){//不是雷，并且余数大于0小于difficulty.numX-1，并且必须第一行//上边
				    oButton.aA = [
							 stateDom[south].firstElementChild,//南
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[south - 1].firstElementChild,//西南
							 stateDom[south + 1].firstElementChild,//东南
				    ];
			    }else if(z > difficulty.num - difficulty.numX){//下边
				    oButton.aA = [
							 stateDom[north].firstElementChild,//北
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[north - 1].firstElementChild,//西北
							 stateDom[north + 1].firstElementChild,//东北
				    ];
				}else{
					oButton.aA = [
							 stateDom[north].firstElementChild,//北
							 stateDom[south].firstElementChild,//南
							 stateDom[z - 1].firstElementChild,//西
							 stateDom[z + 1].firstElementChild,//东
							 stateDom[north + 1].firstElementChild,//东北
							 stateDom[south + 1].firstElementChild,//东南
							 stateDom[north - 1].firstElementChild,//西北
							 stateDom[south - 1].firstElementChild,//西南
					];
				}
				fnText(oButton);
			}
		}			
	}
	//重开保存
	function fnc_M(){//
		come_back = OCr_di.cloneNode(true);
		Array.from(OCr_di.children).forEach((val,i) => {
			var oButton = come_back.children[i].firstElementChild;
			var vB = val.firstElementChild;
			oButton.z = vB.z;
			oButton.zi = vB.zi;
		})
	}
	//设置显示周围有多少个雷，
	function fnText(oButton){
		oButton.aA.forEach(val => {
			if(val.zi == '雷')oButton.zi++;
		});
	}
	function fnFX(oButton){//OCr_di子数组，下标，上下，方向组，是否触发递归扫
		oButton.aA.forEach(val => {
			//该按钮是否删除 并且 没有被设置成疑雷
			if(!val.b && val.className.indexOf('hong') == -1)fnRemove(val);
		})
	}
	function fnRemove(oButton){//点击删除(OCr_di的子数组,位置,边长,方向)
		var mZ = oButton.z;
		var parent = oButton.parentNode;
		parent.removeChild(oButton);
		oButton.b = true;//下次清雷不会被触发
		var aButton = OCr_di.getElementsByTagName('button');
		if(oButton.zi != '雷' && aButton.length == difficulty.lei){
			if(Array.from(aButton).every(val=>val.zi == '雷')){//胜利条件：按键个数等于雷个数
			     clearInterval(oD);
			     fnEnd();
				 if(parseInt(aInput[0].value) > parseInt(getCookieK('B3'))){
				     alert(aInput[0].value + '秒完成,犀利');
				 }else{
					 var sBan = '探花';
					 var mMiao = parseInt(aInput[0].value);
					 var mB2 = parseInt(getCookieK('B2'));
					 var mB1 = parseInt(getCookieK('B1'));
					 if(mMiao < mB2 || !mB2){
						 setCookie('B3',mB2,1000);
						 if(mMiao < mB1 || !mB1){
							 setCookie('B2',mB1,1000);
						     setCookie('B1',mMiao,1000);
							 sBan = '状元'
						 }else{
							 setCookie('B2',mMiao,1000);
							 sBan = '榜眼';
						 }
					 }else{
						 setCookie('B3',mMiao,1000);
					 }
					 var sName = prompt('恭喜你以' + mMiao + '秒成为' + sBan + ',愿你名留青史.请填下你的姓名或者别号','路人');

					 switch (sBan)
					 {
						 case '探花':
						 setCookie('o3',sName,1000);
						 break;
						 case '榜眼':
						 setCookie('o3',getCookieK('o2'),1000);
						 setCookie('o2',sName,1000);
						 break;
						 case '状元':
						 setCookie('o3',getCookieK('o2'),1000);
						 setCookie('o2',getCookieK('o1'),1000);
						 setCookie('o1',sName,1000);
						 console.log(sName);
						 break;	 
					 }
					 fnRankingList();
				 }
			}
		}
		if(oButton.zi){//触雷或者周围有雷
		    parent.innerHTML = oButton.zi;
			if(oButton.zi == '雷'){
			    fnEnd();
					if(confirm('触雷失败是否重新开局')){
						oDivdi.state  =  true;
						fnJC(fnP);
						oDivdi.abc = false;
					}else{
						clearInterval(oD);
					}
			}
		}else{//周围都没有雷会自动递归清楚周围
			fnFX(oButton);
		}
	}
	function fnEnd(){
		oDivdi.onclick = null;
		oDivdi.oncontextmenu = function(){
			return false;
		}
	}
}
</script>
</head>
	<body>
		<div id="A">
			<div class="ld_box">
				<div title="向右拉开局" class="ld"> 》》</div>
			</div>
			<button id="come_back">重开本局</button>
			<div class="kk">
				<span class="chuda">时间：</span><input  readonly="true" class="chuda" value="0"/>
				<span class="chuda ds">地雷：</span>
				<input readonly="true" class="chuda"/>
			</div>
			<div class="di">
				<div class="cr_di"></div>
			</div>
			<div class="num_box">
				<input type="text" class="num_inp" value="9*9" placeholder="总数"/>
				<input type="text" class="lei_inp" value="10" placeholder="雷数"/>
				<button>确定</button>
			</div>
		</div>
		<div id="B">
			<div class="B1"></div>
			<div class="B2"></div>
			<div class="B3"></div>
		</div>
		<input type="button" value="榜单" id="dian"/>
	</body>
</html>
